{extend name="default/layout" /}

{block name="title"}文章归档 - {carefree:config name='site_name' default='Carefree CMS' /}{/block}

{block name="css"}
<link rel="stylesheet" href="{$base_url}/assets/css/list.css">
{/block}

{block name="content"}
<div class="list-page">
    <header class="list-hero">
        <div class="container">
            <div class="list-hero-inner">
                <nav class="list-breadcrumb">
                    {carefree:breadcrumb separator=' <span class="separator">/</span> ' id='crumb'}
                    <a href="{$crumb.url}">{$crumb.title}</a>
                    {/carefree:breadcrumb}
                </nav>

                <h1 class="list-title">
                    <i class="bi bi-archive icon"></i>
                    文章归档
                </h1>

                <p class="list-description">时光的印记，记录每一篇精彩</p>

                <div class="list-stats">
                    <div class="list-stat">
                        <span class="list-stat-value">{carefree:stats type='article' /}</span>
                        <span class="list-stat-label">篇文章</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="list-content">
        <div class="container">
            <div class="list-layout">
                <main class="list-main">
                    <div class="archive-timeline">
                        {carefree:archive type='year' limit='50' id='archive' empty='<div class="empty-state"><i class="bi bi-archive empty-state-icon"></i><h3 class="empty-state-title">暂无归档</h3><p class="empty-state-text">还没有发布任何文章...</p><a href="index.html" class="empty-state-action"><i class="bi bi-house"></i> 返回首页</a></div>'}
                        <div class="archive-year" id="year-{$archive.year}" data-reveal>
                            <h2 class="archive-year-title">
                                <i class="bi bi-calendar-event"></i>
                                {$archive.year} 年
                                <span class="archive-year-count">（{$archive.count} 篇）</span>
                            </h2>

                            {carefree:archive type='month' year='$archive.year' limit='12' id='month_archive'}
                            <div class="archive-month">
                                <h3 class="archive-month-title">{$month_archive.month} 月</h3>
                                <div class="archive-articles">
                                    {carefree:article year='$archive.year' month='$month_archive.month' limit='100' order='publish_time desc' id='article'}
                                    <div class="archive-article-item">
                                        <span class="archive-article-date">{$article.publish_time|date='m-d'}</span>
                                        <a href="{$base_url}/article/{$article.id}.html" class="archive-article-title">{$article.title}</a>
                                    </div>
                                    {/carefree:article}
                                </div>
                            </div>
                            {/carefree:archive}
                        </div>
                        {/carefree:archive}
                    </div>
                </main>

                <aside class="list-sidebar">
                    <!-- 年份导航 -->
                    <div class="sidebar-widget">
                        <div class="widget-header">
                            <i class="bi bi-calendar3"></i>
                            <h4 class="widget-title">年份导航</h4>
                        </div>
                        <ul class="category-list">
                            {carefree:archive type='year' limit='10' id='year_nav' empty='<li class="text-muted">暂无归档</li>'}
                            <li><a href="#year-{$year_nav.year}"><span>{$year_nav.year} 年</span><span class="count">{$year_nav.count}</span></a></li>
                            {/carefree:archive}
                        </ul>
                    </div>

                    <!-- 文章分类 -->
                    <div class="sidebar-widget">
                        <div class="widget-header">
                            <i class="bi bi-grid"></i>
                            <h4 class="widget-title">文章分类</h4>
                        </div>
                        <ul class="category-list">
                            {carefree:category parent='0' limit='10' id='cat' empty='<li class="text-muted">暂无分类</li>'}
                            <li><a href="{$base_url}/category/{$cat.id}.html"><span>{$cat.name}</span><span class="count">{$cat.article_count|default=0}</span></a></li>
                            {/carefree:category}
                        </ul>
                    </div>

                    <!-- 热门标签 -->
                    <div class="sidebar-widget">
                        <div class="widget-header">
                            <i class="bi bi-tags"></i>
                            <h4 class="widget-title">热门标签</h4>
                        </div>
                        <div class="tags-cloud">
                            {carefree:tag limit='20' order='article_count desc' id='tag' empty='<span class="text-muted">暂无标签</span>'}
                            <a href="{$base_url}/tag/{$tag.id}.html" class="tag-link">{$tag.name}</a>
                            {/carefree:tag}
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-reveal]').forEach(el => {
        new IntersectionObserver((entries, obs) => {
            entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('revealed'); obs.unobserve(entry.target); } });
        }, { threshold: 0.1 }).observe(el);
    });
    document.querySelectorAll('.category-list a[href^="#year-"]').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) window.scrollTo({ top: target.offsetTop - 100, behavior: 'smooth' });
        });
    });
});
</script>
{/block}
